// 课前预习模块
import React from 'react'
import '../css/fivestep.less';
import { Link } from 'react-router-dom';
import Modal2 from '../Modal2.js';
import http from '../../../utils/http';



class Absent extends React.Component {

  state = {
    tdShow:false,
    evaluation:"",
    isvideo:false,
    videourl:"",
    havedata:false,
    placeholders:"感谢对于外教老师或是课程教学相关评论"

 }
 showEvaluation= () => {
  this.setState({tdShow: true,placeholders:"感谢对于外教老师或是课程教学相关评论"});
}
// 取消评价
notshowEvaluation= () => {
  this.setState({tdShow: false,evaluation:"",isvideo:false,havedata:false});
}
// 受控组件，同步输入框的内容
Evaluation=( event) => {
  this.setState({evaluation: event.target.value});
}
componentDidMount( ) {
  
} // consol
// 鼠标移入事件
onmouseEnter=()=>{
  
  this.setState({placeholders:""})

}


// 调用本地classin
enterClass= () => { 
  http
  .get('/classin/find/classVideoUrl', {
    params: {
      classId: this.props.status.classinfo.courseTabVo.currentClassId
    }
  })
  .then(data => {
    if(data.length===0){
      this.setState({
        havedata:true,
        isvideo:false
      })
    }else{
      this.setState({
        havedata:false,
        videourl:data[0].videoUrl,
        isvideo:true
      })
    }
    
  }, err => {
})
}
//提交评价
sure= () => { 
  this.notshowEvaluation()
  http
      .post('class/find/feedback',{
        params: {
          feebackBean: this.state.evaluation
        }
      })
      .then(data => {
        // this.notshowEvaluation()
      }, err => {
  })
}
  render () {
    return (
      <div>
        <div className="delposition">
          <div className="fivestep">
             <div className="novicetsakbg havephone">
                <p className={(this.props.status18==="T"?"testbiaoqian":(this.props.status18==="R"?"priviewbiaoqian":"normalbiaoqian"))+" coursesSort "}>
                {this.props.status18==="T"?"体验课":(this.props.status18==="R"?"复习课":this.props.status.classinfo.courseTabVo.tabName)}
                </p>
             </div>
             <p className="pretime">
                 缺席上课
            </p>

               {/* 第一版去掉去复习标签 */}
             {/* <Link to={"review"} className="classafert">去复习</Link> */}
             <div to={"review"} className="classafert"></div>
             <div className="midlehr"></div>
             
             
             <ul >
                <li className="lesson">{this.props.status.classinfo.courseTabVo.className}</li>
                <li className="reader">{this.props.status.classinfo.courseTabVo.englishName}</li>
                <li className="translate">{this.props.status.classinfo.courseTabVo.chineseName}</li>
            </ul>
        
            {/* <p className="classBegin">3月16日 18:00</p> */}
            <ul className="endBottom">
              <li className="contentOfCourses">
              {/* 跳转至教学内容模块，并传送课程id */}
                <Link to={`/admin/teachingcontent/?lessonid=${this.props.status.classinfo.courseTabVo.courseLessonId}`}>
                  <button className="fixbtn backplay" onClick={this.teachingContent} >教学内容 </button>     
                </Link> 
              </li>
              <li className="coursesReplay">
                <button className="fixbtn middlebtn" onClick={this.enterClass}>课程回放 </button>     
              </li>
              <li className="evaluate">
                <button className="fixbtn backplay" onClick={this.showEvaluation}>评价课程 </button> 
              </li>
            </ul>
          </div>

          </div>
          {
              // 评价课程：模态框的显隐进行判断
              this.state.tdShow?<Modal2 notshowEvaluation={this.notshowEvaluation} >
                                  <div>
                                  <header className="modal-header noborder">  
                                      <h4>评价课程</h4> 
                                      <span className="close"
                                            onClick={()=>{
                                                this.setState({
                                                    tdShow:!this.state.tdShow
                                                  })
                                            }}>
                                            <img src={require('../../../images/XX.png')} alt="xx" style={{marginRight:"15px"}} /> 
                                      </span> 
                                  </header>  
                                  <div className="modal-body">  
                                    <textarea value={this.state.evaluation} className="Evaluation" placeholder={this.state.placeholders} onChange={this.Evaluation} onFocus={this.onmouseEnter}>  </textarea>  
                                  </div>  
                                  <div className="sub"> 
                                    <button className="sure" onClick={this.sure}>提交</button>  
                                  </div>
                                  
                                  {/* <footer className="modal-footer">  
                                    <button className="cancel" onClick={this.notshowEvaluation}>取消</button>  
                                    <button className="sure" onClick={this.sure}>确定</button>  
                                  </footer>   */}
                                </div>
                          </Modal2>:''
                  }  


             {
              // 课程回放
              this.state.isvideo?<Modal2 >
                                              <div>
                                                <header className="modal-header noborder">  
                                                    <h4>课程回放</h4>  
                                                </header>  
                                                <div className="modal-body">  
                                                  <video width="600" height="240" controls="controls">
                                                    <source src={this.state.videourl} type="video/mp4" />
                                                    <source src="movie.ogg" type="video/ogg" />
                                                    <source src="movie.webm" type="video/webm" />
                                                    <object data="movie.mp4" width="320" height="240">
                                                      <embed src="movie.swf" width="320" height="240" />
                                                    </object>
                                                  </video>
                                                </div>  
                                                <div className="sub" > 
                                                  <button className="sure" onClick={this.notshowEvaluation}>关闭</button>  
                                                </div>
                                                
                                                {/* <footer className="modal-footer">  
                                                  <button className="cancel" onClick={this.notshowEvaluation}>取消</button>  
                                                  <button className="sure" onClick={this.sure}>确定</button>  
                                                </footer>   */}
                                              </div>
                                        </Modal2>:''
           }  

           {
            // 提示模态框
            this.state.havedata?<Modal2 >
                                  <div>
                                    <header className="modal-header tip-header">  
                                        <h4 className="tip">温馨提示</h4>  
                                        <span className="tipclose"
                                            onClick={()=>{
                                                this.setState({
                                                  havedata:!this.state.havedata
                                                  })
                                            }}>
                                            <img src={require('../../../images/XX.png')} alt="xx" /> 
                                        </span>  
                                    </header>  
                                    <div className="modal-body">  
                                      <p className="testclass"> 课件上传中，请稍后再试</p>
                                    </div>  
                                    <footer className="modal-footer tip-footer">  
                                      <p className="cancel" onClick={this.notshowEvaluation}>知道了</p>  
                                       
                                    </footer>  
                                  </div>
                              </Modal2>:''
           }  
        </div>
    
    )
  }
}
export default Absent